<template>
  <div class="card-wrap">
    <a-card :bordered="false" hoverable>
      <div class="card-content">
        <div class="card-content-icon">
          <icon-file :size="48" />
        </div>
        <div class="card-content-name">{{ data.flowName }}</div>
      </div>
      <template #actions>
        <slot name="btn"> </slot>
      </template>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { FlowGroup } from '@/api/flowGroup/type';

const props = withDefaults(
  defineProps<{
    data: FlowGroup;
  }>(),
  {}
);
</script>
<style lang="less" scoped>
.card-wrap {
  height: 100%;
  transition: all 0.3s;
  border: 1px solid var(--color-neutral-3);
  border-radius: 4px;
  &:hover {
    transform: translateY(-4px);
    // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  }
  .card-content {
    display: flex;
    align-items: center;
    &-icon {
      background: linear-gradient(
        270deg,
        rgba(78, 139, 251, 1) 0%,
        rgba(78, 139, 251, 1) 0%,
        rgba(114, 162, 254, 1) 100%,
        rgba(114, 162, 254, 1) 100%
      );
      border: none;
      border-radius: 15px;
      color: white;
      padding: 8px;
    }
    &-name {
      flex: 1;
      font-weight: 600;
      font-size: 20px;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
:deep(.arco-card-actions) {
  margin: 0;
}
</style>
